<template>
	<view class="box">
		<!-- 头部 -->
		<view>
			<u-navbar title="去接乘客" @leftClick="leftClick" :autoBack="false" placeholder leftIconSize='0px'>
			</u-navbar>
		</view>
		<!-- 导航到起点 -->
		<view class="headBox">
			<view>
				<h2>
					去<span>{{orderArr[0].bourn}}</span>
				</h2>
				<span class='span_first'>
					剩余1.2公里6分钟
				</span>
			</view>
			<view>
				<view class="headBox_first">
					<u-icon name="arrow-upward" color="#4D4E56" size="40"></u-icon>
				</view>
				<span>导航</span>
			</view>
		</view>
		<view class="headBox_com">
			<span>请在<text style='color: orange;font-weight: 700;'>5分01秒</text>内到达乘客上车点</span>
		</view>
		<!-- 地图 -->
		<view class="mapbox">
			<map name="" class="map" :longitude='longitude' :latitude='latitude' :show-location='true'></map>
		</view>
		<!-- 信息 -->
		<view class="Information">
			<view>
				<img src="/static/logo.png" alt="" srcset=""><br>
				<span>尾号7894</span>
			</view>
			<view>
				<view class="Information_1">
					<div class='round'></div>
					<text class="text">{{orderArr[0].departure}}</text>
				</view>
				<view class="Information_2">
					<div class='round2'></div>
					<text class="text">{{orderArr[0].destination}}</text>
				</view>
			</view>
			<!-- 聊天 -->
			<view class="">
				<u-icon name="chat" color="#464749" size="35" @click="Chat"></u-icon>
				<!-- 取消订单 -->
			</view>
			<view class="">
				<u-icon name="close-circle" color="#464749" size="35" @click="Cancel"></u-icon>
			</view>
		</view>
		<!-- 底部到达目的地 -->
		<view class="but">
			<button>到达上车地点</button>
		</view>
	</view>
</template>

<script>
	import amap from "../../common/amap-wx.130.js"
	export default {
		data() {
			return {
				longitude: '', //经度
				latitude: '', //纬度
				orderArr: [],
				amapPlugin: null, // 插件效果
				gaodeKey: "4412f1a1546136b8476c2c1011cbbad9", //  高德地图申请的key
				navMap: '', // 初始实例化地图对象
				points: [], // 缩放视野---记录起点和终点
				initialPoint: [{
					id: 0,
					latitude: '',
					longitude: '',
					iconPath: "../../static/location1.png",
					width: 30,
					height: 30
				}],
			};
		},
		onLoad(){
			this.amapPlugin = new amap.AMapWX({
				key: this.gaodeKey
			})
			// 实例化地图对象
			this.navMap = uni.createMapContext("navMap", this)
		},
		methods: {
			
			getDataObj() {
				let that = this
				let color = '#0091ff'
				return {
					// 起点
					origin: that.longitude + ',' + that.latitude,
					// 终点
					destination: 24.492589 + ',' + 118.178335,
					success: (data) => {
						console.log(data, '驾车的路线')
						that.distance = (data.paths[0].distance / 1000).toFixed(1)
						that.minute = Math.ceil(data.paths[0].duration / 60)
						that.payMoney = data.taxi_cost
						// 驾车的路线
						let points = []
						if (!data || !data.paths || !data.paths[0] || !data.paths[0].steps) {
							uni.$showMsg('查询失败')
							return
						}
						let steps = data.paths[0].steps
						for (let i = 0; i < steps.length; i++) {
							let polylines = steps[i].polyline.split(';')
							for (let j = 0; j < polylines.length; j++) {
								let locations = polylines[j].split(',')
								points.push({
									longitude: locations[0],
									latitude: locations[1]
								})
							}
						}
						// 路线的规划
						this.polyline = [{
							points,
							color,
							width: 3
						}]
					},
					// 获取路线失败
					fail(info) {
						console.log('获取失败', info)
					}
				}
			},
			pathPlanning() {
				// 起点
				if (this.startPath) {
					this.addressName = this.startPath.name
					this.addressDesc = this.startPath.district + this.startPath.address
					this.initialPoint[0] = {
						id: 0,
						longitude: this.startPath.longitude,
						latitude: this.startPath.latitude,
						iconPath: "../../static/location1.png",
						width: 30,
						height: 30
					}
					this.points[0] = {
						longitude: this.startPath.longitude,
						latitude: this.startPath.latitude,
					}
				}
				// 目的地
				if (this.endPath) {
					this.addressEnd = this.endPath.name
					this.addressEndD = this.endPath.district + this.endPath.address
					this.points[1] = {
						longitude: this.endPath.longitude,
						latitude: this.endPath.latitude
					}
					this.initialPoint[1] = {
						id: 1,
						longitude: this.endPath.longitude,
						latitude: this.endPath.latitude,
						iconPath: "../../static/终点.png",
						width: 40,
						height: 40
					}
				}
				// 绘制路线
				if (this.points.length == 2) {
					this.amapPlugin.getDrivingRoute(this.getDataObj())
					// 缩放地图
					this.navMap.includePoints({
						points: this.points
					})
				}
			},
			getPosition() { //获取地址
				let that = this
				uni.getLocation({
					type: 'gcj02',
					success: function(i) {
						console.log(i, 67);
						that.longitude = i.longitude
						that.latitude = i.latitude
					}
				})
			},
			Chat() { //聊天
				console.log('聊天');
			},

			Cancel() { //取消订单
				let that = this
				uni.showModal({
					title: '取消订单',
					content: '取消订单会降低您的服务分您确认要取消吗?',
					cancelText: "考虑一下", // 取消按钮的文字  
					confirmText: "确认取消", // 确认按钮文字 
					confirmColor: '#F54E40', //确认字体的颜色
					cancelColor: '#000', //取消字体的颜色
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showToast({
								title: '取消订单成功',
								duration: 2000, //单位毫秒
							});
							that.timer = setTimeout(() => { //单次计算器
								uni.navigateTo({
									url: '../ FlashGet/ FlashGet' //跳转前往乘客地点
								})
							}, 2000)
						} else if (res.cancel) {
							console.log('用户点击取消');
							
						}
					}
				});
			},
			getorder() {
				var order = uni.getStorageSync('order')
				this.orderArr = order
				console.log(this.orderArr);
			}
		},
		onShow() {
			this.getPosition()
			this.getorder() //读取缓存
			this.pathPlanning()
			
		}
	}
</script>

<style lang="scss">
	.box {
		height: 100%;
		width: 750rpx;

	}

	.headBox {
		width: 100%;
		height: 160rpx;
		display: flex;
	}

	.headBox>view:nth-child(1) {
		width: 75%;
		height: 160rpx;
		border: 1px solid #F6F6F6;
	}

	.headBox>view:nth-child(2) {
		width: 25%;
		height: 160rpx;
		border: 1px solid #F6F6F6;
		text-align: center;
	}

	.headBox_first {
		width: 50%;
		margin: 0 auto;
		margin-top: 10px;
	}

	.headBox>view>h2 {
		padding-left: 7%;
		font-size: 20px;
		margin-top: 5%;
	}

	.headBox>view>h2>span {
		color: orange;
		font-size: 20px;
		font-weight: 700;
	}

	.span_first {
		padding-left: 20px;
		color: silver;
		margin-top: 5px;
	}

	.headBox_com {
		width: 100%;
		height: 100rpx;
		border: 1px solid #F6F6F6;

	}

	.headBox_com span {
		padding-left: 7%;
		line-height: 50px;
	}

	.mapbox {
		width: 100%;
		height: 700rpx;

	}

	.Information {
		width: 100%;
		height: 200rpx;
		display: flex;
	}

	.but {
		width: 100%;
	}

	.but>button {
		background-color: orange;
		color: white;
		height: 60px;
		line-height: 60px;
		font-size: 20px;
	}

	.Information img {
		height: 40px;
		width: 40px;
		border-radius: 25px;
	}

	.Information>view:nth-child(1) {
		width: 20%;
		text-align: center;
		margin-left: 7%;
		position: relative;
		margin-top: 5%;
	}

	.Information>view:nth-child(2) {
		width: 40%;
		margin-left: 7%;
		position: relative;
		margin-top: 3%;
	}

	.Information>view>span {
		color: silver;
	}

	.Information>view:nth-child(3),
	.Information>view:nth-child(4) {
		width: 12%;
		position: relative;
		display: flex;
	}

	.icon {
		margin-left: 20px;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	.round {
		height: 8px;
		width: 8px;
		background-color: green;
		border-radius: 25px;
		margin-top: 5px;
	}

	.round2 {
		height: 8px;
		width: 8px;
		background-color: orange;
		border-radius: 25px;
		margin-top: 5px;
	}

	.text {
		margin-left: 5px;
	}

	.Information_1 {
		display: flex;
	}

	.Information_1 text ,.Information_2 text{
		font-size: 14px;
	}

	.Information_2 {
		display: flex;
		margin-top: 5px;
	}
</style>
